<template>
  <div class="ResumeOperation">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>简历上传与生成</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图·-->
    <el-card class="box-card">
      <div class="card-content">
        <div class="left">
          <div class="box-content">
            <div class="add"></div>
            <el-button type="text" @click="outerVisible = true">
              <div class="inter_words">最受HR青睐的简历，典范标配!</div>
              <div class="inter_words">最受企业中意的简历，高效更专业!</div>
              <div class="inter_words">优秀的简历排版设计，亮点更突出!</div>
              <!-- 点击打开外层 Dialog -->
              <!-- 以下是内c信息 -->
            </el-button>
            <el-dialog title="简历展示" :visible.sync="outerVisible">
              <!-- 第三次层 -->
              <!-- <el-dialog
                width="30%"
                title="内层 Dialog"
                :visible.sync="innerVisible"
                append-to-body
              >
              </el-dialog> -->
              <el-button  title="请直接到<基础信息>编辑内容" @click='toBasicInformation'>编辑</el-button>
              <div slot="footer" class="dialog-footer">
                <div class="modular">
                  <!-- 上部分内容 -->
                  <div class="majority">
                    <div class="content-left">
                      <div class="head"></div>
                      <div class="left-one">
                        <!-- 大字展示 -->
                        <div class="title">
                          <div class="icon one"></div>
                          <div class="big-word">自我介绍</div>
                          <div class="line"></div>
                        </div>
                        <div class="normal-word">
                          自我评价需要符合目标岗位费求的卖点而通过数据及实例对自身价值进行深化,如：土木研究生毕业至今X年,在X级建筑设计院从事结构工程设计工作。参与过X个XX万平米以上的大型公建、民建和商业综合体项目,包括写字楼、商场、公共设施等,具备X个项目的结构专业负责人经验,有XX证书,经验具有代表性的工程有X个，分别为:XXXXX.XXXX等。
                        </div>
                      </div>
                      <!-- 左边部分 -->
                      <div class="left-one">
                        <div class="title">
                          <div class="icon two"></div>
                          <div class="big-word">证书</div>
                          <div class="line"></div>
                        </div>
                        <div class="normal-word">
                          {{ certificate }}
                        </div>
                      </div>
                    </div>
                    <!-- 右边部分 -->
                    <div class="content-right">
                      <div class="right-one">
                        <div class="title">
                          <div class="icon three"></div>
                          <div class="big-word">个人信息</div>
                          <div class="line"></div>
                        </div>
                        <div class="main-content">
                          <div class="left-word">
                            <div class="box">
                              <div class="label">姓名：</div>
                              <div class="words">{{ name }}</div>
                            </div>
                            <div class="box">
                              <div class="label">出生年月：</div>
                              <div class="words">{{ birth }}</div>
                            </div>
                            <div class="box">
                              <div class="label">手机：</div>
                              <div class="words">{{ phone }}</div>
                            </div>
                          </div>
                          <div class="left-word">
                            <div class="box">
                              <div class="label">性别：</div>
                              <div class="words">{{ gender }}</div>
                            </div>
                            <div class="box">
                              <div class="label">现住城市：</div>
                              <div class="words">{{ address }}</div>
                            </div>

                            <div class="box">
                              <div class="label">邮箱：</div>
                              <div class="words">{{ email }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 教育经历 -->

                      <div class="right-one">
                        <div class="title">
                          <div class="icon four"></div>
                          <div class="big-word">教育经历</div>
                          <div class="line"></div>
                        </div>
                        <div class="main-content">
                          <div class="left-word">
                            <div class="box">
                              <div class="label">就读学校：</div>
                              <div class="words">{{ school }}</div>
                            </div>
                            <div class="box">
                              <div class="label">专业：</div>
                              <div class="words">{{ major }}</div>
                            </div>
                          </div>
                          <div class="left-word">
                            <div class="box">
                              <div class="label">就读时间：</div>
                              <div class="words">{{ startTime }}</div>
                              -
                              <div class="words">{{ endTime }}</div>
                            </div>
                            <div class="box">
                              <div class="label">学历：</div>
                              <div class="words">{{ education }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 求职意向 -->
                      <div class="right-one">
                        <div class="title">
                          <div class="icon five"></div>
                          <div class="big-word">求职意向</div>
                          <div class="line"></div>
                        </div>
                        <div class="main-content">
                          <div class="left-word">
                            <div class="box">
                              <div class="label">期望职位：</div>
                              <div class="words">{{ exPosition }}</div>
                            </div>
                            <div class="box">
                              <div class="label">求职状态：</div>
                              <div class="words">{{ exStatus }}</div>
                            </div>
                          </div>
                          <div class="left-word">
                            <div class="box">
                              <div class="label">期望薪资：</div>
                              <div class="words">{{ exSalary }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 工作经历 -->
                      <div class="right-one">
                        <div class="title">
                          <div class="icon six"></div>
                          <div class="big-word">工作经历</div>
                          <div class="line"></div>
                        </div>
                        <div class="main-content">
                          <div class="left-word">
                            <div class="box">
                              <div class="label">公司名称：</div>
                              <div class="words">{{ exPosition }}</div>
                            </div>
                            <div class="box">
                              <div class="label">工作时间：</div>
                              <div class="words">{{ workStart }}</div>
                              -
                              <div class="words">{{ workEnd }}</div>
                            </div>
                          </div>
                          <div class="left-word">
                            <div class="box">
                              <div class="label">工作职位：</div>
                              <div class="words">{{ position }}</div>
                            </div>
                            <!-- <div class="box">
                              <div class="label">所在行业：</div>
                              <div class="word" >
                                {{ industry }}
                              </div>
                            </div> -->
                            <div class="box">
                              <div class="label">所在行业：</div>
                              <div class="words">{{ industry }}</div>
                            </div>
                          </div>
                        </div>
                        <div class="big-box">
                          <div class="words">工作描述：{{ workContent }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 项目经验 -->
                  <div class="fraction">
                    <div class="title">
                      <div class="icon seven"></div>
                      <div class="big-word">项目经验</div>
                      <div class="line"></div>
                    </div>
                    <div class="main-content">
                      <div class="left-word">
                        <div class="box">
                          <div class="label">项目名称：</div>
                          <div class="words">{{ positioName }}</div>
                        </div>
                        <div class="box">
                          <!-- <div class="label"></div> -->
                          <div class="words">项目描述：{{ projectEx }}</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="bottom" style="margin: 15px 2px">
                    <el-button @click="outerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="innerVisible = true"
                      >确定</el-button
                    >
                  </div>
                </div>
              </div>
            </el-dialog>
          </div>

          <!-- 底部按钮生成简历的 -->
          <div class="button">
            <el-button
              type="success"
              style="width: 100%; letter-spacing: 2px; font-size: 17px"
              plain
              @click="outerVisible = true"
              >简历一键生成</el-button
            >
          </div>
        </div>
        <!-- 右边内容 -->
        <div class="right">
          <div class="box-content">
            <div class="add"></div>
            <el-button type="text">
              <div class="inter_words">请提交一份凸显个性的简历!</div>
              <div class="inter_words">一份HR青睐的简历!</div>
              <div class="inter_words">可以上传jpg/png/pdf/word文件~</div>
            </el-button>
          </div>
          <div class="button">
            <!-- @click="outerVisible = true" -->
            <!-- type="success" -->
            <el-upload
              class="upload-demo"
              ref="upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload="false"
              style="display: inline-block; width: 100%; height: 100%"
            >
              <el-button
                style="
                  width: 100%;
                  letter-spacing: 2px;
                  font-size: 17px;
                  color: #67c23a;
                  background: #f0f9eb;
                  border-color: #c2e7b0;
                "
                plain
                slot="trigger"
                size="medium"
                type="primary"
                >简历上传

                <!-- <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                > -->
                <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                <!-- <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div> -->
              </el-button>
            </el-upload>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      outerVisible: false,
      innerVisible: false,
      certificate: "互联网+省一等奖",
      name: " Alan",
      info: [],
      gender: "女",
      email: "",
      phone: "1234244",
      address: "成都",

      birth: "2001-08",

      advantage: "善于学习",
      education: "本科",
      major: "计算机",
      skill: "vue",
      school: "川师",

      startTime: "2017.6",
      endTime: "2021.6",
      exPosition: "前端构架师",
      exStatus: "在校-随时到岗",
      exSalary: "5000-6000元",

      workEnd: "2021.6",
      workStart: "2020.6",
      position: "前构架师",
      industry: "互联网",
      positioName: "管理系统",
      workContent:
        "写最近经历、工作经验的描述、工作成果数据呈现，以便突出个人成果以及做出的贡献;描述尽量具体简洁~",
      projectEx:
        "3.本项目按时按质通过交付标准，并已顺利运营X年，日流量XX人，通过本项目大幅提高了本人对X级项目的管理能力与难点技术解决能力，并获得XX授予XX贡献奖。通过提出与落实XX技术方案解决了项目难题（后述为案例之一)，完成安全快速交付的目的。案例:本项目因商业综合体平面形状不规则，扭转效应明显，平面尺寸为XXmxXXm,为超长超宽结构，混凝土的收缩应力及温度应力不容忽视，除设置收缩后浇带以外，在XX层处的楼板均施加了预应力以及XX方案，楼板配置XX的钢筋，楼面梁增加XX钢筋及腰筋根数。",
      fileList: [],
    };
  },
  methods: {
    // 上传文件的按钮信息
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
     toBasicInformation() {
       this.$router.push("/basicInformation");
    }
   
  },
};
</script>

<style lang="less" scoped>

// /deep/.el-button--primary :focus ,el-button:hover .el-button--primary :hover {
//   background: #85ce61;
//   border-color: red;
//   color: #fff;
// }
/deep/ .el-upload {
  width: 100%;
}
/deep/ .el-dialog {
  width: 65%;
  min-height: 700px;
}
.card-content {
  display: flex;
  width: 100%;
  height: 500px;
  // background:red;
  flex-direction: row;
  .left {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-height: 50%;
    align-items: center;
    //  background:red;
    .box-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80%;
      height: 80%;
      border: 1px #e5e6e6 dashed;
      background: #f7f9fa;
      margin-top: 40px;
      // margin-bottom:0.5px;
      .add {
        height: 80px;
        width: 80px;
        background: url(../../assets/img/add.png) no-repeat;

        background-size: cover;
        margin-bottom: 40px;
      }
      .inter_words {
        width: auto;
        line-height: 40px;
        color: #888;
        font-size: 14px;
      }
      .dialog-footer {
        display: flex;
        width: 100%;
        min-height: 600px;
        margin-top: 0px;

        .modular {
          display: flex;
          flex-direction: column;

          width: 100%;
          height: 80%;

          .majority {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            background: #e6e6e6;
            padding-bottom: 10px;
            .content-left {
              display: flex;
              flex-direction: column;
              width: 35%;
              height: 100%;
              // background: beige;
              align-items: center;
              padding-top: 30px;

              .head {
                display: flex;
                width: 160px;
                height: 160px;
                background: url(../../assets/img/ID-phone.png) no-repeat;
                background-size: cover;
                // background: red;
                margin-left: 5%;
                // align-self: flex-start;
                margin-bottom: 10px;
              }
              .left-one {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                align-items: center;
                border-right: 2px dashed #707070;

                .title {
                  display: flex;
                  width: 90%;
                  height: 30px;
                  align-items: center;
                  margin-bottom: 8px;
                  .icon {
                    height: 20px;
                    width: 20px;
                    background: url("../../assets/img/evaluate.png") no-repeat;
                    // background:url('../../assets/img/certificate-logo.png') no-repeat;
                    background-size: cover;
                  }
                  .line {
                    margin-left: 14px;
                    width: 60%;
                    height: 2px;
                    background: #707070;
                    // background:linear-gradient(to right, #707070, rgb(227, 229, 231));
                    border-radius: 4px;
                    float: right;
                  }
                  .one {
                    height: 17px;
                    width: 17px;
                  }
                  .two {
                    background: url(../../assets/img/certificate-logo.png)
                      no-repeat;
                    background-size: cover;
                  }
                  .three {
                    background: url(../../assets/img/info-logo.png) no-repeat;
                    background-size: cover;
                  }
                  .big-word {
                    font-size: 18px;
                    font-weight: 600;
                    color: #707070;
                    margin-left: 5px;
                  }
                }
                .normal-word {
                  display: inlie-block;
                  width: 90%;
                  font-size: 14px;
                  line-height: 25px;
                  letter-spacing: 1px;
                  text-align: left;
                }
              }
            }
            .content-right {
              display: flex;
              flex-direction: column;
              width: 65%;
              height: 100%;
              // background: blanchedalmond;
              padding-top: 60px;

              align-items: center;

              .right-one {
                display: flex;
                flex-direction: column;
                width: 90%;
                height: 100%;
                justify-content: center;

                .title {
                  display: flex;
                  width: 100%;
                  height: 30px;
                  align-items: center;
                  margin-bottom: 8px;
                  .icon {
                    height: 20px;
                    width: 20px;
                    background: url("../../assets/img/evaluate.png") no-repeat;
                    // background:url('../../assets/img/certificate-logo.png') no-repeat;
                    background-size: cover;
                  }

                  .three {
                    height: 17px;
                    width: 17px;
                    background: url(../../assets/img/info-logo.png) no-repeat;
                    background-size: cover;
                  }
                  .four {
                    background: url(../../assets/img/education-logo.png)
                      no-repeat;
                    background-size: cover;
                  }
                  .five {
                    background: url(../../assets/img/exPosition-logo.png)
                      no-repeat;
                    background-size: cover;
                  }
                  .six {
                    height: 17px;
                    width: 17px;
                    background: url(../../assets/img/workEx.png) no-repeat;
                    background-size: cover;
                  }
                  .big-word {
                    font-size: 18px;
                    font-weight: 600;
                    color: #707070;
                    margin-left: 5px;
                  }
                  .line {
                    margin-left: 14px;
                    width: 60%;
                    height: 2px;
                    background: #707070;
                    // background:linear-gradient(to right, #707070, rgb(227, 229, 231));
                    border-radius: 4px;
                  }
                }
                .main-content {
                  display: flex;
                  width: 100%;
                  justify-content: space-between;
                  font-size: 14px;
                  letter-spacing: 1px;
                  text-align: left;
                  .left-word {
                    display: flex;
                    flex-direction: column;
                    width: 45%;
                    .box {
                      display: flex;
                      width: 100%;
                      line-height: 30px;
                    }
                    .normal-word {
                      display: inlie-block;
                      width: 90%;
                      font-size: 14px;
                      letter-spacing: 1px;
                      text-align: left;
                    }
                  }
                }
                .big-box {
                  display: flex;
                  width: 100%;
                  font-size: 14px;
                  letter-spacing: 1px;
                  text-align: left;
                }
              }
            }
          }
          .fraction {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 20%;
            background: #e6e6e6;

            .title {
              padding: 0 2.25%;
              display: flex;
              width: 100%;
              height: 30px;

              align-items: center;
              margin-bottom: 8px;
              .icon {
                height: 20px;
                width: 20px;
                background: url("../../assets/img/evaluate.png") no-repeat;
                // background:url('../../assets/img/certificate-logo.png') no-repeat;
                background-size: cover;
              }

              .seven {
                height: 17px;
                width: 17px;
                background: url(../../assets/img/projectEx.png) no-repeat;
                background-size: cover;
              }
              .big-word {
                font-size: 18px;
                font-weight: 600;
                color: #707070;
                margin-left: 5px;
              }
              .line {
                margin-left: 14px;
                width: 82%;
                height: 2px;
                background: #707070;
                // background:linear-gradient(to right, #707070, rgb(227, 229, 231));
                border-radius: 4px;
                //  justify-self:flex-start;
              }
            }
            .main-content {
              display: flex;
              width: 100%;
              height: auto;
              justify-content: space-between;
              font-size: 14px;
              letter-spacing: 1px;
              text-align: left;
              .left-word {
                padding-left: 2.25%;
                padding-right: 2.25%;
                padding-bottom: 10px;

                line-height: 30px;
                display: flex;
                flex-direction: column;

                width: 100%;
                .box {
                  display: flex;
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
    .button {
      display: flex;
      width: 80%;
    }
  }
  // 右边
  .right {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-height: 50%;
    align-items: center;
    //  background:red;
    .box-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80%;
      height: 80%;
      border: 1px #e5e6e6 dashed;
      background: #f7f9fa;
      margin-top: 40px;
      // margin-bottom:0.5px;
      .add {
        height: 80px;
        width: 80px;
        background: url(../../assets/img/add.png) no-repeat;

        background-size: cover;
        margin-bottom: 40px;
      }
      .inter_words {
        width: auto;
        line-height: 40px;
        color: #888;
        font-size: 14px;
      }
    }
    .button {
      display: flex;
      width: 80%;
    }
   
  }
}
</style> 